@unocss/preset-mini

What is @unocss/preset-mini?

@unocss/preset-mini is a utility-first CSS framework that provides a set of predefined classes to help you build responsive and modern web interfaces quickly. It is part of the UnoCSS ecosystem and offers a wide range of utilities for styling your web applications.

What are @unocss/preset-mini's main functionalities?

Responsive Design

This feature allows you to apply different styles based on the screen size. In this example, the background color changes from blue on medium screens to green on large screens.

```html
<div class="md:bg-blue-500 lg:bg-green-500">
  Responsive Background Color
</div>
```

Flexbox Utilities

Flexbox utilities help you to easily create flexible and responsive layouts. This example centers the content both horizontally and vertically.

```html
<div class="flex justify-center items-center">
  Centered Content
</div>
```

Spacing Utilities

Spacing utilities allow you to add padding and margin to elements. In this example, the box has padding of 4 units and margin of 2 units.

```html
<div class="p-4 m-2">
  Padded and Margined Box
</div>
```

Typography Utilities

Typography utilities help you to style text elements. This example makes the text large and bold.

```html
<p class="text-lg font-bold">
  Large Bold Text
</p>
```

Color Utilities

Color utilities allow you to easily apply colors to text and backgrounds. This example sets the text color to red and the background color to yellow.

```html
<div class="text-red-500 bg-yellow-200">
  Colored Text and Background
</div>
```

Other packages similar to @unocss/preset-mini

tailwindcss

Tailwind CSS is a highly popular utility-first CSS framework that offers a wide range of utilities for building modern web interfaces. It is similar to @unocss/preset-mini in its approach to utility-first design but has a larger community and more extensive documentation.

bootstrap

Bootstrap is a widely-used CSS framework that provides a set of pre-designed components and utilities. While it is not strictly utility-first like @unocss/preset-mini, it offers a range of utilities for responsive design and layout.

README

@unocss/preset-mini

The minimal preset for UnoCSS.

Installation

npm i -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'

UnoCSS({
  presets: [
    presetMini(),
  ],
})

Features

Dark Mode

By default, this preset generates class based dark mode with dark: variant.

<div class="dark:bg-red:10" />

will generate:

.dark .dark\:bg-red\:10 {
  background-color: rgba(248, 113, 113, 0.1);
}

To opt-in media query based dark mode, you can use @dark: variant:

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgba(248, 113, 113, 0.1);
  }
}

Or set globally with the config for dark: variant

presetMini({
  dark: 'media'
})

CSS @layer

CSS's native @layer is supported with variant layer-xx:

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

will generate:

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

Theme

You can fully customize your theme property in your config, and UnoCSS will eventually deeply merge it to the default theme.

presetMini({
  theme: {
    // ...
    colors: {
      'veryCool': '#0000ff', // class="text-very-cool"
      'brand': {
        'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
      }
    },
  }
})

To consume the theme in rules:

rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]

One exception is that UnoCSS gives full control of breakpoints to users. When a custom breakpoints is provided, the default will be overridden instead of merging. For example:

presetMini({
  theme: {
    // ...
    breakpoints: {
      sm: '320px',
      md: '640px',
    },
  },
})

Right now, you can only use the sm: and md: breakpoint variants.

verticalBreakpoints is same as breakpoints but for vertical layout.

License

MIT License © 2021-PRESENT Anthony Fu